Vue3PDF预览（vue3 |
您所在的位置：网站首页 › 浏览器 pdf › Vue3PDF预览（vue3 |
Vue3PDF预览（vue3
|
vue3-pdf-app 插件 网站预览PDF最佳且最简单的方式： PDF FileName如果需要自定义网页内预览，可以采用本PDF预览组件（PDFViewer.vue） 本组件基于 [email protected] 插件进行二次封装，更适合日常使用需要！ 插件支持功能包括但不限于：缩放、旋转、全屏预览、打印、下载、内容检索、dark/light主题定制化、侧边缩略图、页码跳转、本地化配置、多个浏览器支持（经测试 Google、Firefox、safari 均支持良好）、查看文档属性！ 其中 dark 和 light 主题均支持自定义覆盖各个部分颜色变量，从而定制主题样式！ 插件默认语言是English，同时也可定制本地化语言为中文，只需从以下链接下载资源文件，使用 引入即可： viewer.properties组件可自定义设置以下属性： pdf文件地址（src），类型：string，必传，默认 '' 预览容器宽度（width），类型：number | string，默认 '100%' 预览容器高度（height），类型：number | string，默认 '100vh' 页面默认缩放规则（pageScale），类型：number | string，默认 'page-fit'，自适应展示一页，可选：'page-actual'|'page-width'|'page-height'|'page-fit'|'auto'，数字即代表缩放为：pageScale% 预览主题（theme），类型：string，默认 'dark'，可选 dark | light 覆盖pdf文件名（fileName），类型：string，默认 '' 效果如下图： theme: dark
theme: light
①安装插件：pnpm i [email protected] ②创建PDF预览组件PDFViewer.vue： import { computed } from 'vue' import VuePdfApp from 'vue3-pdf-app' import 'vue3-pdf-app/dist/icons/main.css' interface Props { src: string|ArrayBuffer // pdf地址 width?: string|number // 预览容器宽度 height?: string|number // 预览容器高度 pageScale?: number|string // 页面默认缩放规则，可选 'page-actual'|'page-width'|'page-height'|'page-fit'|'auto' theme?: string // 预览主题 可选 dark | light fileName?: string // 覆盖pdf文件名 } const props = withDefaults(defineProps(), { src: '', width: '100%', height: '100vh', pageScale: 'page-fit', // 默认自适应展示一页 theme: 'dark', fileName: '' }) const viewerWidth = computed(() => { if (typeof props.width === 'number') { return props.width + 'px' } else { return props.width } }) const viewerHeight = computed(() => { if (typeof props.height === 'number') { return props.height + 'px' } else { return props.height } }) // emitted only once when Pdfjs library is binded to vue component // Can be used to set Pdfjs config before pdf document opening. // function afterCreated (pdfApp: any) { // console.log('afterCreated pdfApp:', pdfApp) // } // emitted when pdf is opened but pages are not rendered // function openHandler (pdfApp: any) { // console.log('open pdfApp:', pdfApp) // } const emit = defineEmits(['loaded']) // emitted when pdf document pages are rendered. Can be used to set default pages scale function pagesRendered (pdfApp: any) { console.log('pagesRendered pdfApp:', pdfApp) emit('loaded', pdfApp) } @themeColor: #1677FF; :deep(*) { box-sizing: content-box; } // 定制化主题色 .pdf-app.dark { --pdf-app-background-color: rgb(83, 86, 89); --pdf-sidebar-content-color: rgb(51, 54, 57); --pdf-toolbar-sidebar-color: #24364e; --pdf-toolbar-color: rgb(50, 54, 57); --pdf-loading-bar-color: #606c88; --pdf-loading-bar-secondary-color: @themeColor; --pdf-find-results-count-color: #d9d9d9; --pdf-find-results-count-font-color: #525252; --pdf-find-message-font-color: #a6b7d0; --pdf-not-found-color: #f66; --pdf-split-toolbar-button-separator-color: #fff; --pdf-toolbar-font-color: #d9d9d9; --pdf-button-hover-font-color: @themeColor; --pdf-button-toggled-color: #606c88; --pdf-horizontal-toolbar-separator-color: #fff; --pdf-input-color: #606c88; --pdf-input-font-color: #d9d9d9; --pdf-find-input-placeholder-font-color: @themeColor; --pdf-thumbnail-selection-ring-color: hsla(0,0%,100%,.15); --pdf-thumbnail-selection-ring-selected-color: rgb(147, 179, 242); --pdf-error-wrapper-color: #f55; --pdf-error-more-info-color: #d9d9d9; --pdf-error-more-info-font-color: #000; --pdf-overlay-container-color: rgba(0,0,0,.2); --pdf-overlay-container-dialog-color: #24364e; --pdf-overlay-container-dialog-font-color: #d9d9d9; --pdf-overlay-container-dialog-separator-color: #fff; --pdf-dialog-button-font-color: #d9d9d9; --pdf-dialog-button-color: #606c88; :deep(.thumbnail.selected>.thumbnailSelectionRing) { background-color: rgb(147, 179, 242); } } /* for light theme */ .pdf-app.light { --pdf-app-background-color: rgb(245,245,245); --pdf-sidebar-content-color: rgb(245,245,245); --pdf-toolbar-sidebar-color: rgb(190,190,190); --pdf-toolbar-color: rgb(225,225,225); --pdf-loading-bar-color: #3f4b5b; --pdf-loading-bar-secondary-color: #666; --pdf-find-results-count-color: #3f4b5b; --pdf-find-results-count-font-color: hsla(0,0%,100%,.87); --pdf-find-message-font-color: hsla(0,0%,100%,.87); --pdf-not-found-color: brown; --pdf-split-toolbar-button-separator-color: #000; --pdf-toolbar-font-color: rgb(142,142,142); --pdf-button-hover-font-color: #666; --pdf-button-toggled-color: #3f4b5b; --pdf-horizontal-toolbar-separator-color: #000; --pdf-input-color: #3f4b5b; --pdf-input-font-color: #d9d9d9; --pdf-find-input-placeholder-font-color: #666; --pdf-thumbnail-selection-ring-color: hsla(208,7%,46%,.7); --pdf-thumbnail-selection-ring-selected-color: #3f4b5b; --pdf-error-wrapper-color: #f55; --pdf-error-more-info-color: #d9d9d9; --pdf-error-more-info-font-color: #000; --pdf-overlay-container-color: hsla(208,7%,46%,.7); --pdf-overlay-container-dialog-color: #6c757d; --pdf-overlay-container-dialog-font-color: #d9d9d9; --pdf-overlay-container-dialog-separator-color: #000; --pdf-dialog-button-font-color: #d9d9d9; --pdf-dialog-button-color: #3f4b5b; :deep(.thumbnail.selected>.thumbnailSelectionRing) { background-color: rgb(105, 105, 105); } }③在要使用的页面引入： import PDFViewer from './PDFViewer.vue' // import PDFSrc from '@/assets/files/Markdown.pdf' // const PDFSrc = new URL('@/assets/files/Markdown.pdf', importa.url).href // pdf document pages are rendered. Can be used to set default pages scale const PDFSrc = ref('https://cdn.jsdelivr.net/gh/themusecatcher/[email protected]/Markdown.pdf') function onLoaded (pdfApp: any) { console.log('loaded app:', pdfApp) } vue3-pdf-app 参考文档 vue3-pdf-app PDFViewer 基本使用 |
【本文地址】